{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
补货
{% endblock %}
{% block css %}
    <style rel="stylesheet">
        {#sm applies to x-small devices (portrait phones, less than 576px)#}
        @media (max-width: 575.98px) {
            .phone {
                display: none;
            }
        }

    </style>
{% endblock %}
{% block buhuo %}
active
{% endblock %}
{% block content %}
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col" class="phone">#</th>
            <th scope="col">商品名称</th>
            <th scope="col" class="phone">种类</th>
            <th scope="col">售价</th>
            <th scope="col">库存</th>
            <th scope="col">规格</th>
            <th scope="col">单位</th>
            <th scope="col">购买数量</th>
            <th scope="col">补货</th>
        </tr>
        </thead>
        <tbody>
        {% for good in goods %}
            <tr>
                <td class="phone">{{ forloop.counter }}</td>
                <td>{{ good.name }}</td>
                <td class="phone">{{ good.category.name }}</td>
                <td>{{ good.selling_price }}</td>
                <td class="quantity_in_store">{{ good.quantity_in_store }}</td>
                <td>{{ good.specification }}</td>
                <td>{{ good.unit }}</td>
                <td><input type="number" value="0" class="sum" min="1"></td>
                <td><button type="button" class="btn btn-primary singl" data-id="{{ good.id }}">补货</button></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}
{% block js %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script>
        function is_denger() {
            if (Number($(this).text()) < {{ is_danger }}) {
                $(this).addClass("text-danger");
                $(this).addClass("fw-bold");

            }
        }
        $(".quantity_in_store").each(is_denger);
        var table = document.getElementsByTagName("table")[0];
        table.onclick = function (e) {
            // 触发单独购买和加入购物车
            if (e.target.nodeName.toLowerCase() === "button") {
                var tr = e.target.parentNode.parentNode;
                if (e.target.classList.contains("singl")) {
                    // 入库
                    var sum_input = tr.querySelector(".sum");
                    // 如果输入框是0
                    if (!Number(sum_input.value)) return;

                    var quantity_in_store = tr.querySelector(".quantity_in_store");
                    var result_in_store = Number(quantity_in_store.innerText) + Number(sum_input.value);

                    if (Number(result_in_store) < {{ is_danger }}){
                        $(quantity_in_store).addClass("fw-bold");
                        $(quantity_in_store).addClass("text-danger");
                    }


                    $.ajax(
                        {
                            url: "{% url 'store:add_to_store' %}",
                            data: {
                                id: e.target.getAttribute("data-id"),
                                amount: sum_input.value,
                                csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val(),
                            },
                            type: "post", success: function (text) {
                                if (text==="0") return;
                                quantity_in_store.innerText = result_in_store;
                                if (Number(quantity_in_store.innerText) >= {{ is_danger }}) {
                                    $(quantity_in_store).removeClass("text-danger");
                                    $(quantity_in_store).removeClass("fw-bold");
                                }
                            }
                        }
                    );
                    // 重置输入框的数字, 放到最后
                    sum_input.value = 0;
                }
            }

        };
    </script>
{% endblock %}